<template>
  <div class="config-box">
    <div class="config-title">
      菜单配置
    </div>
    <div class="config-content">
      <draggable
        :list="menuList"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        @start="dragging = true"
        @end="dragging = false"
      >
        <div v-for="(item,index) in menuList" :key="index">
          <div class="menu-header" @click="handleClick(index)">
            <div class="left-box">
              <div class="icon-preview-box">
                <img class="icon-preview" :src="item.icon" alt="">
              </div>
              <span class="title">{{ item.title }}</span>
            </div>
            <div class="right-box">
              <i class="el-icon-rank"></i>
            </div>
          </div>
          <div class="attach" v-if="current === index">
            <div class="item-content">
              <el-form size="mini" label-width="50px">
                <el-form-item label="icon">
                  <material-library v-model="item.icon" :num="1" :width="80" :height="80"></material-library>
                </el-form-item>
                <el-form-item label="名称">
                  <el-input v-model="item.title" placeholder="请输入组件名称"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-radio-group v-model="item.type">
                    <el-radio :label="1">内部组件</el-radio>
                    <el-radio :label="2">外部连接</el-radio>
                    <el-radio :label="3">选中TAB</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                  <el-input v-model="item.url" placeholder="请输入地址"></el-input>
                </el-form-item>
                <el-button size="mini" style="width: 100%" type="primary" icon="el-icon-circle-check" @click="onSubmit">确定</el-button>
              </el-form>
            </div>
          </div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import MaterialLibrary from "@/components/ImageLibrary/index.vue";
import draggable from "vuedraggable";

export default  {
  name: 'mallMenuConf',
  components: {MaterialLibrary,draggable},
  props: {metadata: Object},
  data() {
    return {
      menuList: this.metadata.menuList,
      current: -1,
      dragging: false
    }
  },
  methods: {
    checkMove: function(e) {
      window.console.log("Future index: " + e.draggedContext.futureIndex);
    },
    onSubmit() {
      this.$emit('ok',this.menuList)
      this.handleClick(this.current)
    },
    handleClick(index) {
      if (this.current === index) {
        this.current = -1
        this.$forceUpdate()
        return
      }
      this.current = index
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.config-box {
  width: 98%;
  min-height: 200px;
  margin: 0 auto;
}
.config-title {
  width: 380px;
}

.config-content {
  margin-top: 12px;
}

.menu-header {
  margin-top: 10px;
  width: 100%;
  height: 60px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
}

.left-box {
  height: 60px;
  width: 60%;
  display: flex;
}

.icon-preview-box {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon-preview {
  width: 50px;
  height: 50px;
}

.title {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
}

.right-box {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.attach {
  background-color: #F1F3F4;
  width: 100%;
  height: 300px;
  transition: opacity 0.2s;
}

.item-content {
  padding: 10px;
}
</style>
